<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>制作ICON图标-有symbol</title>
    <style>
      body,
      ul {
        margin: 0;
        padding: 0;
      }

      body {
        background-image: url(../../images/grid.png);
      }
      svg {
        background-color: rgba(255, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
      <!-- 
        symbol: 定义一个图标，用于复用 
        id: 图标的唯一标识，用于进行操作
        viewBox: 图标的视口，用于控制图标的大小
        symbol与defs的区别：
          1. symbol是定义一个图标，用于复用，而defs是定义一个模板，用于复用
          2. symbol是定义一个图标，而defs是定义一个模板，而模板可以包含任何元素，包括symbol.
      -->
      <!-- 1. icon图标 previous -->
      <symbol id="icon-previous" viewBox="0 0 100 100">
        <path fill="currentColor" d="M 80 0, L 20 50, L 80 100 Z"></path>
      </symbol>

      <!-- 2. icon图标 next -->
      <symbol id="icon-next" viewBox="0 0 100 100">
        <polygon points="20 0, 80 50, 20 100"></polygon>
      </symbol>
      <!-- 3. icon图标 play -->
      <symbol id="icon-play" viewBox="0 0 100 100">
        <path fill="currentColor" d="M 0 0, L 100 50, L 0 100 Z"></path>
      </symbol>
      <!-- 复用 -->
      <use x="100" y="100" href="#icon-previous"></use>
    </svg>

    <!-- 复用 -->
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
      <!-- 直接在use上指定icon的 width和height -->
      <use x="100" y="100" href="#icon-previous" width="100" height="100"></use>
    </svg>

    <!-- 缩小 -->
    <svg width="30" height="30" xmlns="http://www.w3.org/2000/svg">
      <use href="#icon-previous"></use>
    </svg>

    <!-- 放大 -->
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
      <use href="#icon-previous"></use>
    </svg>
  </body>
</html>
